<template>
  <div>
    <el-form :label-position="'left'" label-width="150px">
<!--      <el-form-item label="logo">-->
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="https://.cn/api/file/upload-img"-->
<!--          name="photo"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handlePhoto"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--          <img v-if="photoImg" :src="photoImg" class="avatar">-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="单位名称">-->
<!--        <el-input v-model="member.name" style="width:200px"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系方式">-->
<!--        <el-input v-model="member.phone" type="phone" style="width:200px"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="单位地址" prop="origin">-->
<!--        <el-cascader-->
<!--          placeholder="选择地址"-->
<!--          :options="ORIGIN"-->
<!--          :props="{value:'label'}"-->
<!--          v-model="member.address"-->
<!--          class="cascader"-->
<!--          filterable></el-cascader>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="详细地址">-->
<!--        <el-input v-model="member.addressDetail" style="width:400px"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="营业执照">-->
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="https://h'k.cn/api/file/upload-img"-->
<!--          name="photo"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handleIntelligencePhoto"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--          <img v-if="intelligenceImg" :src="intelligenceImg" class="avatar">-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="统一社会信用代码">-->
<!--        <el-input v-model="member.code" style="width:400px"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="所属会客室">
        <el-select v-model="member.unit_grade_id" clearable placeholder="选择" >
          <el-option
            v-for="item in unitLevelList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="单位分类">-->
<!--        <el-select v-model="member.classify_id" clearable placeholder="选择" >-->
<!--          <el-option-->
<!--            v-for="item in unitSortList"-->
<!--            :key="item.id"-->
<!--            :label="item.name"-->
<!--            :value="item.id"-->
<!--          >-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <!--            <el-form-item label="绑定付费套餐(未对接)">-->
      <!--                <el-select v-model="member.meal" placeholder="选择" >-->
      <!--                    <el-option-->
      <!--                        v-for="item in mealOptions"-->
      <!--                        :key="item.id"-->
      <!--                        :label="item.name"-->
      <!--                        :value="item.id"-->
      <!--                        >-->
      <!--                    </el-option>-->
      <!--                </el-select>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="套餐到期时间">-->
      <!--                <el-date-picker-->
      <!--                v-model="member.date"-->
      <!--                type="date"-->
      <!--                placeholder="选择日期">-->
      <!--                </el-date-picker>-->
      <!--            </el-form-item>-->


      <el-form-item label="排序">
        <el-input v-model="member.sortNum" style="width:200px"></el-input>
      </el-form-item>
<!--      <el-form-item label="业务范围">-->
<!--        <el-input v-model="tag" palceholder="输入业务范围" style="width:200px"></el-input>-->
<!--        <el-button type="primary" @click="addTag">添加</el-button>-->
<!--      </el-form-item>-->
      <el-form-item>
        <div class="memberPicWrapper">
          <div class="memberPicDetail" v-for="(item,index) of tagList" :key="index">
            <div>{{item}}</div>
            <img src="../../../static/images/delete.png" alt="" class="delete" @click.stop="deleteTag(item,index)">
          </div>
        </div>
      </el-form-item>

      <el-form-item label="值班表详情">
        <vue-ueditor-wrap v-model="detail" :config="myConfig"></vue-ueditor-wrap>
      </el-form-item>

      <div class="add-table-wrapper">
        <el-button type="primary" @click="commit" class="add-table-wrapper-btn">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  import ORIGIN from '../../assets/json/origin.json'

  export default {
    data() {
      return {
        ORIGIN,
        id: '',
        photoImg: '',
        photoId: '',
        intelligenceImg: '',//营业执照
        intelligenceId: '',
        unitLevelList:[],
        unitSortList:[],
        member: {
          name: '',
          code: '',
          address: [],
          addressDetail: '',
          phone: '',
          sortNum: '',
          unit_grade_id:'',
          classify_id:''
        },
        tag: '',
        tagList: [],
        mealOptions: [],
        detail: '',
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度`
          initialFrameHeight: 500,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          // serverUrl: 'http://35.201.165.105:8000/controller.php',
          serverUrl: 'https://hks-sys.dindong.cn/ueditor-php/controller.php',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
          toolbars: [
            [
              'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'strikethrough',
              'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
              'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
              'simpleupload', 'insertimage', 'insertvideo', 'music',
              'horizontal', 'date', 'time',
              'inserttable'
            ]
          ]
        }

      }
    },
    methods: {
      async commit() {
        let params = {
          id: this.id,
          unit_name: this.member.name,
          logo_id: this.photoId,
          uniform_social_credit_code: this.member.code,
          province: this.member.address[0] || '',
          city: this.member.address[1] || '',
          area: this.member.address[2] || '',
          address: this.member.addressDetail,
          license_img_id: this.intelligenceId,
          contact_number: this.member.phone,
          introduction: this.detail,
          business_scope: this.tagList,
          sort: this.member.sortNum,
          classify_id: this.member.classify_id,
          unit_grade_id: this.member.unit_grade_id
        }
        let res = await this.$api.editUnitInfo(params);
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        } else {
          this.$message.errow(res.data.message)
        }
      },
      addTag() {
        if (this.tag == '') {
          this.$message({
            type: 'warning',
            message: '业务范围不能为空'
          });
          return;

        }
        this.tagList.push(this.tag);
        this.tag = ''
      },
      deleteTag(item, index) {
        //删除
        this.tagList.splice(index, 1);
      },
      beforeAvatarUpload(file) {
        //上传照片前的操作
        // console.log(file,555)
      },
      handlePhoto(res, file) {
        //上传照片成功
        if (res.data) {
          this.photoImg = res.data.img_url;
          this.photoId = res.data.id;
        }
      },
      handleIntelligencePhoto(res, file) {
        //上传营业照片成功
        if (res.data) {
          this.intelligenceImg = res.data.img_url;
          this.intelligenceId = res.data.id;
        }
      },
      async showConsultation(id) {
        //获取详情
        let res = await this.$api.getUnitDetail({id: id});
        if (res.data.level == 'success') {
          console.log(res.data)
          let data = res.data.data
          this.member.name = data.name;
          this.photoId = data.photo_id;
          this.photoImg = data.logo_url;
          this.intelligenceId = data.license_img_id;
          this.intelligenceImg = data.license_img_url;
          this.member.code = data.uniform_social_credit_code;
          this.member.address = [data.province, data.city, data.area];
          this.member.addressDetail = data.address;
          this.member.phone = data.contact_number;
          this.tagList = data.unit_business_label;
          this.detail = data.introduction;
          this.member.sortNum = data.sort
          this.member.unit_grade_id = parseInt(data.unit_grade_id);
          this.member.classify_id = parseInt(data.classify_id)
        } else {
          this.$message.error(res.data.message)
        }
      },
      async getVipPackageList() {
        const res = await this.$api.getVipPackageList();
        if (res.data.level == 'success') {
          this.mealOptions = res.data.data
        }
      },
      //获取单位等级列表
      async getUnitGradeList(){
        let params = {
          page: 1,
          limit: 999
        }
        const res = await this.$api.getUnitGradeList(params);
        if (res.data.level == 'success'){
          this.unitLevelList = res.data.data;
        } else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      //获取单位分类
      async getUnitClassifyList(){
        let params = {
          page: 1,
          limit: 999
        }
        const res = await this.$api.getUnitClassifyList(params);
        if (res.data.level == 'success'){
          this.unitSortList = res.data.data;
        } else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getUnitGradeList();
      this.getUnitClassifyList();
      if (this.id) {
        this.showConsultation(this.id)
        this.getVipPackageList();
      }
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: contain;
  }

  .add-table-wrapper {
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }

  .memberPicWrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .memberPicDetail {
    text-align: center;
    margin: 0 10px;
    position: relative;

    .delete {
      width: 20px;
      height: 20px;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
</style>
